<template>
	<view>
		<view class="flex padding-sm" style="background-color: #D03032;">
			<view class="flex-sub flex justify-center align-center text-white" v-for="(item, index) in accountTabs" :key="index" @tap="accountChange(index)">
				<text>{{ item.name }}</text>
			</view>
		</view>
		<!-- 指示箭头 -->
		<view class="flex padding-lr-sm to-top">
			<view class="flex-sub flex justify-center align-center" v-for="(item, index) in accountTabs" :key="index">
				<view v-show="accountTabIndex == index"><icon-font type="pointUp" color="#D03032" size="24"></icon-font></view>
			</view>
		</view>
		<!-- 收益 -->
		<view class="bg-white radius-l shadow margin-lr-sm margin-bottom">
			<view class="padding-lr padding-tb-sm solid-bottom flex" v-show="CNYShow">
				<view class="flex-sub text-bold text-lg  flex align-center padding-left text-red">人民币</view>
				<view class="flex-twice padding-left-xl text-lg">{{ CNYValue }}</view>
			</view>
			<view class="padding-lr padding-tb-sm solid-bottom flex" v-show="BTCShow">
				<view class="flex-sub text-bold text-lg  flex align-center padding-left text-btc">BTC</view>
				<view class="flex-twice padding-left-xl text-lg">{{ BTCValue }}</view>
			</view>
			<view class="padding-lr padding-tb-sm flex" v-show="ETHShow">
				<view class="flex-sub text-bold text-lg  flex align-center padding-left text-eth">ETH</view>
				<view class="flex-twice padding-left-xl text-lg">{{ ETHValue }}</view>
			</view>
		</view>
		<!-- 提现 -->
		<view class="bg-white radius shadow margin-sm" v-show="accountTabIndex == 1">
			<view class="flex align-center padding-left">
				<icon-font type="advice" color="#FFA104" size="24"></icon-font>
				<view class="bg-white padding-sm text-sm radius-l margin-lr-sm" style="width: 60%;">每月25日后开始结算上月预估收益本月预估收益则在下月25日开始结算。</view>
				<navigator class="txbtn" hover-class="none" url="withdraw">提现</navigator>
				<!-- <view class="txbtn">提现</view> -->
			</view>
		</view>
		<view class="margin-lr-sm" v-show="accountTabIndex < 2">
			<type-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" v-show="accountTabIndex == 0"></type-tabs>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" height="80">
				<order-list :list="items" :showTitle="showTitle" v-if="accountTabIndex == 0"></order-list>
				<settle-list :list="items" v-if="accountTabIndex == 1"></settle-list>
				<withdraw-list :list="items" v-if="accountTabIndex == 2"></withdraw-list>
			</mescroll-body>
		</view>

		<search-clipboard :searchModal="searchModal" @resetModal="resetSearchModal"></search-clipboard>
		<tab-bar :current="3"></tab-bar>
	</view>
</template>

<script>
import tabBar from '../../components/tab-bar.vue';
import typeTabs from '@/components/type-tabs.vue';
import orderList from '@/pages/wallet/components/order-list.vue';
import settleList from '@/pages/wallet/components/settle-list.vue';
import withdrawList from '@/pages/wallet/components/withdraw-list.vue';

import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
var _self; //this容器
export default {
	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {
		tabBar,
		typeTabs,
		orderList,
		settleList,
		withdrawList
	},
	data() {
		return {
			accountTabs: [{ name: '预估收益' }, { name: '已结算余额' }, { name: '累计提现' }],
			accountTabIndex: 0,
			tabs: [
				{ name: '我的返佣', apiUrl: 'orders/unsettledProductList', items: null, title: true, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '大掌柜返佣', apiUrl: 'orders/unsettledFirstUserList', items: null, title: false, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '二掌柜返佣', apiUrl: 'orders/unsettledSecondUserList', items: null, title: false, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '已结算收益', apiUrl: 'userOrdersSettleMonth/userList', items: null, title: false, num: 1, y: 0, curPageLen: 0, hasNext: true, disabled: true },
				/* { name: '提现明细', apiUrl: 'userWithdrawal/list', items: null, title: false, num: 1, y: 0, curPageLen: 0, hasNext: true, disabled: true } */
			],
			tabIndex: 0, // 当前菜单下标
			preIndex: 0, // 前一个菜单下标
			totalPage: 0, //总页数
			estimationList: [], //预估收益
			settleList: [], //已结算余额
			rateCurrency: '', //设置的结算方式
			searchModal: this.$util.initClipboard()
		};
	},
	computed: {
		// 列表数据
		items() {
			console.log(this.tabs[this.tabIndex].items);
			return this.tabs[this.tabIndex].items;
		},
		//是否显示商品title
		showTitle() {
			return this.tabs[this.tabIndex].title;
		},
		//人民币金额
		CNYValue() {
			let item = null;
			if (this.accountTabIndex == 0) {
				item = this.estimationList.find(item => item.currency == 'CNY');
			} else {
				item = this.settleList.find(item => item.currency == 'CNY');
			}
			if (item) {
				return this.accountTabIndex == 2 ? this.$util.FixedCeilCoin(item.withdrawalAmount, 2) : this.$util.FixedCeilCoin(item.balance, 2);
			} else {
				return '0.00';
			}
		},
		//BTC数量
		BTCValue() {
			let item = null;
			if (this.accountTabIndex == 0) {
				item = this.estimationList.find(item => item.currency == 'BTC');
			} else {
				item = this.settleList.find(item => item.currency == 'BTC');
			}
			if (item) {
				return this.accountTabIndex == 2 ? this.$util.FixedCeilCoin(item.withdrawalAmount, 8) : this.$util.FixedCeilCoin(item.balance, 8);
			} else {
				return '0.00000000';
			}
		},
		//ETH数量
		ETHValue() {
			let item = null;
			if (this.accountTabIndex == 0) {
				item = this.estimationList.find(item => item.currency == 'ETH');
			} else {
				item = this.settleList.find(item => item.currency == 'ETH');
			}
			if (item) {
				return this.accountTabIndex == 2 ? this.$util.FixedCeilCoin(item.withdrawalAmount, 6) : this.$util.FixedCeilCoin(item.balance, 6);
			} else {
				return '0.000000';
			}
		},
		//人民币是否显示
		CNYShow() {
			let item = null,
				value = '0.00',
				flg = true;
			if (this.accountTabIndex == 0) {
				item = this.estimationList.find(item => item.currency == 'CNY');
			} else if (this.accountTabIndex == 1) {
				item = this.settleList.find(item => item.currency == 'CNY');
			}
			if (item) {
				value = item.balance;
			}
			if (value == '0.00' && this.rateCurrency != 'CNY') {
				flg = false;
			}
			return flg;
		},
		//BTC是否显示
		BTCShow() {
			let item = null,
				value = '0.00000000',
				flg = true;
			if (this.accountTabIndex == 0) {
				item = this.estimationList.find(item => item.currency == 'BTC');
			} else if (this.accountTabIndex == 1) {
				item = this.settleList.find(item => item.currency == 'BTC');
			}
			if (item) {
				value = item.balance;
			}
			if (value == '0.00000000' && this.rateCurrency != 'BTC') {
				flg = false;
			}
			return flg;
		},
		//ETH是否显示
		ETHShow() {
			let item = null,
				value = '0.000000',
				flg = true;
			if (this.accountTabIndex == 0) {
				item = this.estimationList.find(item => item.currency == 'ETH');
			} else if (this.accountTabIndex == 1) {
				item = this.settleList.find(item => item.currency == 'ETH');
			}
			if (item) {
				value = item.balance;
			}
			if (value == '0.000000' && this.rateCurrency != 'ETH') {
				flg = false;
			}
			return flg;
		}
	},
	onLoad(options) {
		_self = this;
		uni.hideTabBar();
	},
	onShow() {
		//预估收益
		//this.estimationAccounts();
		//已结算收益
		_self.settleAccounts();
		//结算方式
		_self.getRateCurrency();
		setTimeout(() => {
			_self.$util.searchClipboard(_self.$store.state.searchContent).then(res => {
				_self.searchModal = res;
			});
		}, 200);
	},
	methods: {
		resetSearchModal() {
			_self.searchModal = _self.$util.initClipboard();
		},
		/* 获取结算方式 */
		getRateCurrency() {
			_self.$http.httpRequest('userRebate/userId', null, true).then(res => {
				if (res._tranStatus) {
					_self.rateCurrency = res._data.userRateCurrency;
				}
			});
		},
		//账户类别切换
		accountChange(index) {
			if (index != _self.accountTabIndex) {
				_self.accountTabIndex = index;
				if (_self.accountTabIndex < 2) {
					this.tabIndex = index == 0 ? 0: 3 ;
					this.tabChange(this.tabIndex);
				}
			}
		},
		//用户预估帐户余额信息
		estimationAccounts() {
			_self.$http.httpRequest('accounts/estimationAccounts', null, true).then(res => {
				if (res._tranStatus) {
					_self.estimationList = res._data.list;
				}
			});
		},
		//结算帐户余额信息
		settleAccounts() {
			_self.$http.httpRequest('accounts/settleAccounts', null, true).then(res => {
				if (res._tranStatus) {
					_self.settleList = res._data ? res._data.list : [];
				}
			});
		},

		/*下拉刷新的回调 */
		downCallback() {
			//预估收益
			_self.estimationAccounts();
			//列表刷新
			_self.mescroll.resetUpScroll();
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			//联网加载数据
			if (_self.isChangeTab) {
				_self.mescroll.showDownScroll();
			}
			_self
				.getListDataFromNet(page.num, page.size)
				.then(curPageData => {
					let curTab = _self.tabs[_self.tabIndex];
					let endflg = false;
					if (page.num == 1) curTab.items = []; //如果是第一页需手动制空列表
					curTab.items = curTab.items.concat(curPageData); //追加新数据
					_self.mescroll.endByPage(curPageData.length, _self.totalPage);
					_self.$nextTick(() => {
						curTab.num = page.num; // 页码
						curTab.curPageLen = curPageData.length; // 当前页长
						curTab.hasNext = _self.mescroll.optUp.hasNext; // 是否还有下一页
						if (_self.isChangeTab) {
							_self.isChangeTab = false;
							_self.mescroll.hideUpScroll();
						}
					});
				})
				.catch(() => {
					//联网失败, 结束加载
					_self.mescroll.endErr();
				});
		},

		/* 获取查询数据 */
		getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
			try {
				const param = {
					currentPage: pageNum,
					pageSize: pageSize
				};
				let apiUrl = _self.tabs[_self.tabIndex].apiUrl;
				console.log(apiUrl, param);
				let promise = new Promise(function(resolve, reject) {
					_self.$http.httpRequest(apiUrl, param, true).then(res => {
						console.log(apiUrl, res);
						if (res._tranStatus) {
							_self.totalPage = res._data.totalPage;
							resolve(res._data.pageItems);
						}
					});
				});
				return promise;
			} catch (e) {
				return Promise.reject(e);
			}
		},
		// 切换菜单
		tabChange(index) {
			// 记录前一个菜单的数据
			let preTab = _self.tabs[_self.preIndex];
			preTab.y = _self.mescroll.getScrollTop(); // 滚动条位置
			_self.preIndex = index;
			// 当前菜单的数据
			let curTab = _self.tabs[index];
			if (!curTab.items) {
				// 没有初始化,则初始化
				_self.isChangeTab = true;
				_self.mescroll.resetUpScroll();
			} else {
				// 初始化过,则恢复之前的列表数据
				_self.mescroll.setPageNum(curTab.num + 1); // 恢复当前页码
				_self.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext); // 恢复是否有下一页或显示空布局
				_self.$nextTick(() => {
					_self.mescroll.scrollTo(curTab.y, 0); // 恢复滚动条的位置
				});
			}
		}
	}
};
</script>

<style lang="scss">
.to-top {
	position: relative;
	top: -15rpx;
}
.txbtn {
	font-size: 32rpx;
	vertical-align: middle;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 30rpx 40rpx;
	height: 48rpx;
	font-family: Helvetica Neue, Helvetica, sans-serif;
	white-space: nowrap;
	border-radius: 10rpx;
	background-color: #c50000;
	font-weight: bold;
	color: #ffffff;
}
</style>
